<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定时器问题</title>
    <style>
      #move {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <input value="开始按钮1" type="button" />
      <input value="开始按钮2" type="button" />
      <input value="开始按钮3" type="button" />
      <input value="开始按钮4" type="button" />
      <input value="开始按钮5" type="button" />
      <input value="开始按钮6" type="button" />
    </div>
    <input value="暂停按钮" id="stop" type="button" />
    <input value="开始按钮" id="start" type="button" />
    <div id="move"></div>
    <script>
      //获取元素
      var btns = document.getElementById("box").children;
      var stopBtn = document.getElementById("stop");
      var startBtn = document.getElementById("start");
      var move = document.getElementById("move");

      //定义一个全局定时器变量,用于开启和清除
      var timer = null;
      //定义一个可以开启定时器的函数

      /* 
        el: 运动的元素；
        end: 运动结束位置；
        time: 运动时长；
        duration: 运动间隔时间；
         */
      function startTimer(el, end, time = 2000, duration = 50) {
        //每次开启前先清除定时器
        clearInterval(timer);
        //获取元素起始位置
        var offsetLeft = el.offsetLeft;
        //获取元素结束位置
        // var end = 500;
        //获取元素运动步长：持续时间 / 运动间隔时间
        var step = time / duration;
        //运动总次数，用于在超过运动次数是停止动画
        var totalCount = (end - offsetLeft) / step;
        //已经运动次数
        var count = 0;
        timer = setInterval(function () {
          offsetLeft += step;
          if (count >= totalCount) {
            offsetLeft = end;
            clearInterval(timer);
          }
          count++;
          el.style.left = offsetLeft + "px";
        }, duration);
      }
      //绑定清除定时器的函数
      stopBtn.onclick = function () {
        clearInterval(timer);
      };
      startBtn.onclick = function () {
        startTimer(move, 500, 100);
      };
      //绑定开始运动函数
      for (var btn of btns) {
        btn.onclick = function () {
          startTimer(move, 600, 100);
        };
      }
    </script>
  </body>
</html>
